<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>我的活动</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <script src="../layui/layui.js"></script>
  <script type="text/javascript" src="../js/basic.js"></script>
  <link rel="stylesheet" href="../css/basic.css">
  <style>
    .btn-wrap{
      margin:5px 20px;
    }
    .btn-wrap>button{
      float: right;
      margin: 0 10px;
    }  
  </style>
</head>
<body>
<script>
!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1];return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.9),c:n(i,"color","0,0,0"),n:n(i,"count",99)}}function o(){a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function i(){r.clearRect(0,0,a,c);var n,e,t,o,m,l;s.forEach(function(i,x){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))}),x(i)}var a,c,u,m=document.createElement("canvas"),d=t(),l="c_n"+d.l,r=m.getContext("2d"),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/45)},w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,window.onmousemove=function(n){n=n||window.event,y.x=n.clientX,y.y=n.clientY},window.onmouseout=function(){y.x=null,y.y=null};for(var s=[],f=0;d.n>f;f++){var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})}u=s.concat([y]),setTimeout(function(){i()},100)}();
</script>
    <form action="" class="bs-center layui-form  layui-container" id="seaActivity" lay-filter="seaActivity">
            <div class="layui-col-sm5 layui-form-item">
                <label class="layui-form-label">活动名：</label>
                <div class="layui-input-block">
                <input type="text" name="act_name" class="layui-input">
                </div>
            </div>
            <div class="layui-col-sm5">
                <label class="layui-form-label">社团号：</label>
                <div class="layui-input-block">
                <input type="text" name="act_no" class="layui-input">
                </div>
            </div>
            <div class="layui-col-sm2">
                <a id="searchIpt" class="layui-btn layui-btn-normal">搜索</a>
            </div>
        </form>
  <div class="layui-col-sm8 layui-col-sm-offset2">
    <table id="table" lay-filter="table"></table>
  </div>
</body>
<form id="addNumber" class="layui-form bs-hidden fm-in" lay-filter="addNumber">
  <div class="layui-form-item bs-hidden">
      <label class="layui-form-label">活动代号：</label>
      <div class="layui-input-block">
          <input type="text" id="act_mark" name="act_mark"  lay-filter="act_mark" class="layui-input">
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">活动名称：</label>
      <div class="layui-input-block">
      <input type="text" id="act_name" name="act_name" lay-filter="act_name" readonly  lay-verify="required"  autocomplete="off" class="layui-input">
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">社团号：</label>
      <div class="layui-input-block">
      <input type="text" id="soc_no" name="soc_no" lay-filter="soc_no" readonly  lay-verify="required" autocomplete="off" class="layui-input">
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">活动地点：</label>
      <div class="layui-input-block">
          <input type="text" id="act_loc" name="act_loc" lay-filter="act_loc" readonly lay-verify="required"  autocomplete="off" class="layui-input">
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">开始时间：</label>
      <div class="layui-input-block">
        <input type="text" class="layui-input"  readonly id="act_start" name="act_start"  lay-filter="act_start">
      </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">截止时间：</label>
    <div class="layui-input-block">
      <input type="text" class="layui-input"   readonly id="act_end" name="act_end" lay-filter="act_end">
    </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">活动介绍：</label>
      <div class="layui-input-block">
        <textarea name="act_intro" id="act_intro"  readonly  class="layui-textarea"></textarea>
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">活动图片：</label>
      <div class="layui-input-block">
        <img src="../img/触角动漫.jpg" id="act_pic" style="width:150px;height:150px;border:1px solid gray;margin:10px">
      </div>
  </div>
</form>
<span class="bs-hidden" id="StuNo"></span>
<!-- 表格里的操作按钮 -->
<script type="text/html" id="ipts">
  <a lay-event="retail" class="layui-btn layui-btn-xs">详情</a>
  <a class="layui-btn layui-btn-xs" lay-event="addPar">加入</a>
</script>
<script>
layui.use(['laydate','table', 'layer', 'jquery','form'], function () {
	var laydate = layui.laydate;
	var table = layui.table;
	var layer = layui.layer;
	var $ = layui.jquery;
	var form = layui.form;
	var mydate = new Date();
	var dataNow = mydate.toLocaleDateString();
	//第一个实例
	$.ajax({
	  	type:"POST",
	  	url:"/user/getStuUser", //通过session获取当前Society
	  	dataType:"json",
	  	error:function(){
	  		console.log("error!");
	  	},
	  	success:function(data){
	  		console.log(data);
	  		$('#StuNo').html(data.stu_no);  
	  		//alert($('#SocNo').text());
	  		searchAll();
	  	}
	})
	
	function searchAll(){  //查询所有活动
		$.ajax({
			type:"GET",
			url:"/student/serchActivity",
			data:{},//写完登录后更改
			dataType:"json",
			error:function(){
				alert("error!");
			},
			success:function(data){
				console.log(data);
				//注入动态表格
				showTable(data);	
			}
		})  	  
	}//searchAll();

	//搜索
	$('#searchIpt').click(function (event){
	      console.log($('#search').serialize())
	      $.get('/student/serchActivityByFuzzy', $('#seaActivity').serialize(), function (res) {
	        console.log(res)
	        console.log(1)
	        showTable(res)
	      }, "json")
	      event.preventDefault()
	 })//ajax click
	function showTable(tableData){
	  table.render({
	    id: 'tableImp',
	    elem: '#table',
	    page: true,//开启分页
	    cols: [
	        [//表头
	          {
	            field: 'act_no',
	            title: '活动号',
	            width: '7%',
	            sort: true,
	            fixed: 'left',
	            align: 'center'
	          }, {
	            field: 'act_name',
	            title: '活动名称',
	            width: '19%',
	            align: 'center'
	          }, {
	            field: 'act_loc',
	            title: '活动地点',
	            width: '13%',
	            align: 'center'
	          },  {
	            field: 'act_start',
	            title: '开始时间',
	            width: '10%',
	            align: 'center',
	            templet: '#StartTime'
	          },{
	            field: 'act_end',
	            title: '截止时间',
	            width: '10%',
	            align: 'center',
	            templet: '#EndTime'
	          },{
	            field: 'act_intro',
	            title: '活动介绍',
	            width: '28%',
	            align: 'center'
	          },{
	            fixed: 'right',
	            title: '操作',
	            align: 'center',
	            width: '13%',
	            toolbar: '#ipts'
	          }
	        ]
	      ]
	      //加载数据
	      ,data:tableData
	  });
	}//showTable()
	//执行一个laydate实例
	laydate.render({
	  elem: '#act_start' //指定元素
	  ,format:"yyyy-MM-dd"
	});
	laydate.render({
		 elem: '#act_end' //指定元素
		,format:"yyyy-MM-dd"
	});
	table.on('tool(table)',function (obj) {  
	    var event = obj.event
	    if(event === 'retail') {
	      layer.open({
	        type: 1,
	        closeBtn: 1,
	        title: '活动信息详情',
	        content: $('#addNumber'),
	        area: ['100%', '99.5%'],
	        success: function(layero, index){
	            console.log(layero, index);
				$('#act_no').val(obj.data.act_no);
				$('#act_name').val(obj.data.act_name);
				$('#soc_no').val(obj.data.soc_no);
				$('#act_loc').val(obj.data.act_loc);
				$('#act_start').val(dateFormat(obj.data.act_start));
				$('#act_end').val(dateFormat(obj.data.act_end));
				$('#act_intro').val(obj.data.act_intro);	
				$('#act_pic').attr("src",obj.data.act_pic);
	          }
	      })
	    }else if(event === 'addPar') {
	        layer.open({
		          type:1,
		          closeBtn: 0,
		          title:"提示信息",
		          content:"<span style='font-size:20px; margin-left:40px'>"+"真的加入么？"+"</span>",
		          area:['200px','150px'],
		          btn:['确定','取消'],
		          btnAlign:'c',
		          yes:function(index, layero){
		        	  $.ajax({
		             		type:"POST",
		             		data:{
		             			"stu_no":$('#StuNo').text(),
		             			"act_no":obj.data.act_no
		             		},
		             		url:"/student/joinActivity",
		             		dataType:"json",
		             		error:function(){
		             			alert("已加入过，请勿多次加入！");
		             		},
		             		success:function(data){
		             			console.log(data);
		             			if(data == true){
		             				layer.msg('加入成功!',{
		             					time:1000
		             				},function(){
		             					layer.closeAll();
		             				});
		             				searchAll();
		             				return false;
		             			}else if(data == false){
		             				layer.msg('加入失败!',{
		             					time:1000
		             				},function(){
		             					layer.closeAll();
		             				});
		             				searchAll();
		             				return false;
		             			}
		             		}	
		              	})
		          },
		          btn2:function(index, layero){
		              layer.close(index);
		              return false;
		          }
		        });//open
	    }//else if
	  })
	
})
</script>

<script type="text/html" id="StartTime">  
	 {{dateFormat(d.act_start) }}
</script>
<script type="text/html" id="EndTime">  
	 {{dateFormat(d.act_end) }}
</script>

</html>